<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>dom操作</title>
    <style>
        .box1 {
            width: 100px;
            height: 100px;
            background-color: red;
            margin-bottom: 10px;
        }

        .box2 {
            width: 100px;
            height: 100px;
            background-color: blueviolet;
            margin-bottom: 10px;
        }
    </style>
    <script>
        // 一、获取HTML元素的四种方式
        // var odiv = document.getElementById("id");
        // var oDiv = document.getElementsByClassName("class")[0];
        // var oDiv = document.getElementsByName("demoName");
        // var oDiv = document.getElementsByTagName("div");
        // 二、修改HTML元素的方式
        // 1.改变HTML标签内的内容
        function changeTag() {
            document.getElementById('div1').innerHTML = "我是新修改的内容";
        }
        //  2.修改HTML的样式
        function changeStyle() {
            document.getElementById('div1').style.color = "pink";
        }
        //  3.修改HTML属性
        function changeAttr() {
            var oDiv = document.getElementById('box1');
            oDiv.setAttribute("class", "box2");
        }
        // 4.创建新的HTML元素
        function createTag(){
            var oP = document.createElement('p');
            var node = document.createTextNode('This is new paragraph.');
            oP.appendChild(node);
            var ele = document.getElementById('div3');
            ele.append(oP);
        }
        // 5.删除一个HTML元素
        // removeChild(node);成功时返回删除的名字，不成成功返回null
        function removeTag(){
            var oodiv = document.getElementById('mm');
            var xNode = oodiv.removeChild(oodiv.childNodes[1]);
            // document.write("删除节点的内容是：" + xNode.innerHTML);
            console.log("删除节点的内容是：" + xNode.innerHTML);
        }
        
    </script>
</head>

<body>
    <!-- 1.改变HTML标签内的内容 -->
    <div id="div1">我原来的内容</div>
    <input type="button" onclick="changeTag()" value="点我修改成新内容">
    <br>
    <!-- 2.修改HTML的样式 -->
    <input type="button" onclick="changeStyle()" value="点我修文本颜色">
    <br>
    <!-- 3.修改HTML属性 -->
    <div id="box1" class="box1"></div>
    <div id="box2" class="box2"></div>
    <input type="button" onclick="changeAttr()" value="点我修改属性">
    <br>
    <br>
    <br>
    <p id="p1">This is a paragraph.</p>
    <p id="p2">This is another paragraph.</p>
    <div id="div3"></div>
    <input type="button" onclick="createTag()" value="点我创建一个新段落">
    <br>
    <br>
    <br>
    <div id="mm">
        <h2>HTML5</h2>
        <h2>CSS3</h2>
    </div>
    <input type="button" onclick="removeTag()" value="删除HTML5">
</body>

</html>